<template>
	<view class="page">
		<up-navbar title="订单详情" :autoBack="true" safeAreaInsetTop placeholder> </up-navbar>
		<view style="background-color: #fff;  height: 100rpx; ">
			<view style="width: 95%; margin: 0 auto;">
				<!-- :activeStyle="{ width: '33%', height: '44px' }" -->
				<up-tabs :list="list1" @change="tabsChange" :scrollable='false' lineColor="#FF7F00"></up-tabs>
		
			</view>
		</view>
		<view  v-if="xhjinsf==0" class="serve-detail-wrapper">
		  <view class="serv-content">
		    <view
		      class="serve-item"
		      :id="v.boxId"
		      v-for="(v, i) in details.content"
		      :key="i">
		      <view class="serve-item-header">
		        <text class="head-b"></text>
		        <text class="item-tit" :id="v.title">{{ v.title }}</text>
		      </view>
		      <view class="serve-info" v-html="v.value"></view>
		    </view>
		  </view>
		</view>
		<view v-if="xhjinsf==1">
			
			
			<!-- 基本信息 -->
			<view class="xiangmujs"  style=" margin-top: 20rpx;">
				<view class="juzong"  >
					<view  class="fudongs" >
						<view class="biao" ></view>
						<view style="margin-left: 20rpx; font-weight: 900; font-size: 40rpx; " ><text>基本信息</text></view>
						
					</view>
					<view style=" color: #666666; padding-bottom: 20rpx;">
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>姓名:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.user_nickname}}</text></view>
						</view>
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>所属地区:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.user_address}}</text></view>
						</view>
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>联系电话:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.user_mobile}}</text></view>
						</view>
						
						
					
					</view>
				</view>
			</view>
			<!-- 下单信息 -->
			<view class="xiangmujs"  style=" margin-top: 20rpx;">
				<view class="juzong"  >
					<view  class="fudongs" >
						<view class="biao" ></view>
						<view style="margin-left: 20rpx; font-weight: 900; font-size: 40rpx; " ><text>下单信息</text></view>
						
					</view>
					<view style=" color: #666666; padding-bottom: 20rpx;">
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>订单编号:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.order_no}}</text></view>
						</view>
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>下单时间:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.createtime}}</text></view>
						</view>
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>订单金额:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>{{neirong.order_money}}</text></view>
						</view>
						<view style="display: flex; margin-top: 20rpx;">
							<view style="margin-left: 20rpx; width: 30%"><text>订单分红:</text></view>
							<view style="margin-left: 20rpx; width: 70%"><text>¥{{neirong.my_money}}</text></view>
						</view>
							
					
					</view>
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import ServerDetail from "./serverDetail"
	import request from '@/utils/request'
	export default {
		components:{
			ServerDetail,
		},
		data() {
			return {
				kehu_id:'',
				jing:'',
				serviceId:'',
				list1: [{
						name: '项目介绍'
					},
					{
						name: '订单信息'
					}],
				xhjinsf:0,
				details:{},
				neirong:'',
				
			}
		},
		onLoad(e) {
		this.kehu_id= parseInt(e.id)
		this.serviceId= parseInt(e.serviceId)
		this.kehuxiangqing()
		this.getDetails()
		},
		methods: {
			getDetails() {
			  this.$request({
			      url: "api/Service/getServiceDetail",
			      header: "application/x-www-form-urlencoded",
			      data: {
			        id: this.serviceId,
			      },
			    })
			    .then((res) => {
			      this.details = res.data;
			      // this.details.content.forEach((item, index) => {
			      //   item.boxId = `boxId${index}`;
			      // });
			    });
			},
			kehuxiangqing(){
					var insg = uni.getStorageSync('userinfo')
				this.$request({
					url: 'api/User/getMyOrderDetail',
					header:"application/x-www-form-urlencoded",
					data: {
					order_id:this.kehu_id,
					type:insg.user_type,
					}
				}).then(res => {
					if (res.code == 1) {
						
					console.log(res.data)
					// res.data.forEach((item, index) => {
					// 	item.flow_images=request+item.flow_image
					// });	
				
					this.neirong=res.data
					this.jing=request+res.data.service_info.flow_image
					console.log(this.jing,'112213132132231123')
				
					} else {
						
					
					}
				})
			},
			tabsChange(index){
				console.log(index)
				this.xhjinsf=index.index
			},
		}
	}
</script>

<style lang="scss" scoped>
.page {
		background: #F8F8F8;
	}
	.xiangmujs{
		width: 95%; margin: 0 auto; background-color: #fff; border-radius: 20rpx;
	}
	.biaos{
		    width: 33rpx;
		    height: 33rpx;
		    background: #ff7f00;
		    border-radius: 50%;
			display: flex;
			 align-items: center;
			 justify-content: center
	}
	.sfgsf{
		    width: 17rpx;
		    height: 17rpx;
		    background: #fff;
		    border-radius: 50%;
		
	}
	.biao{
		width: 10px;  height: 20px; background: #FF7F00; 
	}
	.fudongs{
		display: flex; height: 80rpx; line-height: 80rpx;   align-items: center;
	}
	.juzong{
		width: 90%; margin: 0 auto;
	}

		// 可以加在uni.scss中
		::deep .u-tabs__wrapper__nav {
		  background: #f8f8f8;
		}
		::deep .u-sticky__content {
		  background: #f8f8f8;
		}
		.serve-detail-wrapper {
		  background: #f8f8f8;
		
		  .serv-det-header {
		    image {
		      height: 416rpx;
		      width: 100%;
		    }
		  }
		
		  .cycle {
		    display: flex;
		    background: #fff;
		    padding: 20rpx 30rpx;
		    box-sizing: border-box;
		
		    .processing {
		      text-align: center;
		      font-weight: 400;
		      font-size: 24rpx;
		      color: #999999;
		      border-right: 1px #f8f8f8 solid;
		      flex: 1;
		
		      .time {
		        font-weight: 500;
		        font-size: 28rpx;
		        color: #333333;
		        margin-bottom: 10rpx;
		      }
		    }
		  }
		
		  .tab {
		    display: flex;
		    padding: 24rpx 20rpx;
		    box-sizing: border-box;
		    background: #fff;
		    margin-top: 20rpx;
		
		    .name {
		      flex: 1;
		      color: #666666;
		      font-size: 28rpx;
		      text-align: center;
		    }
		
		    .active {
		      flex: 1;
		      text-align: center;
		      font-weight: 500;
		      font-size: 28rpx;
		      color: #02109c;
		    }
		  }
		  .my-tabs {
		    background: #f8f8f8;
		    width: 100%;
		    box-sizing: border-box;
		  }
		  .serv-content {
		    position: relative;
		    // top: 50rpx;
		    margin-top: 20rpx;
		    padding: 0 32rpx 150rpx;
		
		    .serve-item {
		      background: #fff;
		      margin-bottom: 12rpx;
		      border-radius: 20rpx;
		      padding: 32rpx;
		
		      .serve-item-header {
		        margin-bottom: 20rpx;
		
		        .head-b {
		          display: inline-block;
		          width: 12rpx;
		          height: 24rpx;
		          background: #02109c;
		        }
		
		        .item-tit {
		          color: #333333;
		          font-weight: bold;
		          font-size: 32rpx;
		          margin-left: 16rpx;
		        }
		      }
		    }
		  }
		
		  .serve-detail-info {
		    margin-top: 20rpx;
		    padding: 0 32rpx;
		
		    .detail-info-list {
		      text {
		        display: block;
		        margin: 8rpx 0;
		      }
		      .detail-val {
		        color: #333;
		        margin-right: 30rpx;
		        font-size: 28rpx;
		      }
		
		      .detail-label {
		        font-size: 26rpx;
		        color: #999;
		      }
		
		      .serve-item {
		        background: #fff;
		        margin-bottom: 12rpx;
		        border-radius: 20rpx;
		        padding: 32rpx;
		
		        .item-tit {
		          color: #000000;
		          font-weight: bold;
		          font-size: 32rpx;
		          margin-bottom: 14rpx;
		        }
		        .price-num-box {
		          margin-bottom: 14rpx;
		          color: #999;
		          .price-box {
		            font-size: 26rpx;
		            .price {
		              color: #ff7139;
		              font-size: 38rpx;
		              font-weight: bold;
		            }
		            .pro {
		              margin-left: 7rpx;
		            }
		          }
		          .num-box {
		            font-size: 24rpx;
		            .person-avatar {
		              .avatar {
		                width: 40rpx;
		                height: 40rpx;
		                border-radius: 50%;
		                border: 2rpx solid #fff;
		                z-index: 1;
		              }
		              .avatar1 {
		                margin-right: -20rpx;
		                z-index: 2;
		              }
		              .avatar2 {
		                margin-left: -20rpx;
		                z-index: 0;
		              }
		              .pro {
		                margin-left: 7rpx;
		              }
		            }
		          }
		        }
		      }
		    }
		  }
		}
		.apply-btn-wrapper {
		  position: fixed;
		  bottom: 0;
		  background: #fff;
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  width: 100%;
		  height: 140rpx;
		  padding: 0 30rpx;
		  box-sizing: border-box;
		
		  .share {
		    width: 200rpx;
		    height: 96rpx;
		    line-height: 96rpx;
		    border-radius: 200rpx 200rpx 200rpx 200rpx;
		    border: 2rpx solid #02109c;
		    font-size: 32rpx;
		    color: #02109c;
		
		    button {
		      background: none !important;
		      border: none !important;
		      color: #02109c;
		    }
		
		    button[plain] {
		      border: 0;
		    }
		  }
		
		  .apply-btn {
		    margin: 0 auto;
		    height: 96rpx;
		    background: linear-gradient(128deg, #ff9839 0%, #ff7139 100%);
		    border-radius: 200rpx;
		    width: 466rpx;
		    text-align: center;
		    font-size: 32rpx;
		    color: #fff;
		    line-height: 96rpx;
		  }
		}
</style>
